<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-11-14 17:22:09
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
view.fans
  view.tab
    view.flex.px-32.py-20
      view.btn.mr-24.f-28(:class="{ confirm: type == 1 }", @click="onTab(1)") 我的关注
      view.btn.f-28(:class="{ confirm: type == 2 }", @click="onTab(2)") 我的粉丝
  view.container
    view(v-if="fansList.length > 0")
      view.card.flex.align-items-center.mx-32.my-24.px-24.py-24(v-for="(item, index) in fansList", :key="index")
        image.mr-16(:src="item.avatar")
        view.flex1
          view.f-32-B {{ item.nickname }}
          view.id.mt-16.f-24 {{ item.unid }}
        //- 我的关注
        view.btn-group(v-if="type == 1")
          view.btn.confirm.f-28(v-if="item.is_hu == 1", @click="qxFocus(item.id)") 互相关注
          view.btn.cancel.f-28(v-else, @click="qxFocus(item.id)") 已关注
        //- 我的粉丝
        view.btn-group(v-if="type == 2")
          view.btn.confirm.f-28(v-if="item.is_hu == 1" @click="qxFocus(item.id)") 互相关注
          view.btn.cancel.f-28(v-else @click="qxFocus(item.id)") 关注
    view.nocontent(v-else)
      view No content
</template>

<script setup>
import MerchantCover from "@/static/images/merchant-cover.png";
import { userApi } from "../../api";

const type = ref(1);
const total = ref(0);
const fansList = ref([]);
const fllowFansType = ref({
  type: "",
  num: 10,
  page: 1
});

onLoad((options) => {
  uni.setNavigationBarTitle({
    title: options.type == 1 ? "我的关注" : "我的粉丝"
  });
  type.value = options.type;
  fllowFansType.value.type = options.type; //type=1 关注  type=2 粉丝
  getFllowFansList();
});

const getFllowFansList = () => {
  userApi
    .followfanslist(fllowFansType.value)
    .then((res) => {
      console.log("res", res);
      if (res.code == 1) {
        total.value = res.data.total;
        // totalListData.value = res.data.data;
        // console.log("dwfdwwdef", totalListData.value);
        // fansList.value = [...fansList.value, ...res.data.data];
        fansList.value = fllowFansType.value.page === 1 ? res.data.data : fansList.value.concat(res.data.data);

        uni.hideLoading();
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};
const status = ref(true);
//取消关注
const qxFocus = (id) => {
  if (!status.value) return;
  status.value = false;
  userApi
    .followFocus({ user_id: id })
    .then((res) => {
      status.value = true;
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      }
      uni.showToast({ title: res.msg, icon: "none" });
      (fllowFansType.value.page = 1), (fansList.value = []);
      getFllowFansList();
      // fansList.value.forEach((item) => {
      //   if (item.id === id) {
      //     item.is_hu = res.data ? 1 : 0;
      //   }
      // });
      // indexListData.value = [];
      // getIndexList();
    })
    .catch((err) => {
      console.log("err", err);
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

// 触底触发
onReachBottom(() => {
  if (total.value > fllowFansType.value.num * fllowFansType.value.page) {
    fllowFansType.value.page++;
    getFllowFansList();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }
});

// 切换tab
const onTab = (value) => {
  type.value = value;
  fllowFansType.value.type = value; // type=1 关注  type=2 粉丝
  fllowFansType.value.page = 1;
  fansList.value = [];
  getFllowFansList();
};
</script>

<style lang="stylus" scoped>
page {
  background: #F5F5F5;
}

.fans {
  .tab {
    background: #ffffff;

    .btn {
      width: 336rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: rgba(48, 110, 255, 0.12);
      color: #306EFF;
      text-align: center;
      border-radius: 64rpx;
    }

    .confirm {
      background: #306EFF;
      color: #ffffff;
    }
  }

  .card {
    background: #ffffff;
    border-radius: 20rpx;

    image {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
    }

    .id {
      color: rgba(0, 0, 0, 0.38);
    }

    .btn-group {
      .btn {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
        border-radius: 20rpx;
      }

      .confirm {
        background: #306EFF;
        color: #ffffff;
      }

      .cancel {
        background: #ffffff;
        color: #306EFF;
        border: 1px solid #306EFF;
      }
    }
  }
}
</style>
